<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="130px"
      >
        <el-form-item label="标题" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入标题"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级栏目" prop="parent" v-if="showParent">
          <treeselect
            v-model="formData.parent"
            :options="categoryList"
            placeholder="请选择父级栏目"
            :style="{ width: '100%' }"
            :normalizer="normalizer"
            :show-count="true"
          />
        </el-form-item>
<!--        <el-form-item label="信件类型" prop="tp">-->
<!--          <el-select-->
<!--                  v-model="formData.tp"-->
<!--                  :style="{ width: '100%' }"-->
<!--          >-->
<!--            <el-option-->
<!--                    v-for="(item, index) in tpOptions"-->
<!--                    :key="index"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="排序" prop="no_order" v-if="showParent">
          <el-input-number
            v-model.number="formData.no_order"
            placeholder="请输入排序"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="英文文件夹名称" prop="foldername">
          <el-input
            v-model="formData.foldername"
            placeholder="请输入英文文件夹名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页推荐" prop="com_ok" v-if="showParent">
          <el-radio-group v-model="formData.com_ok">
            <el-radio
              v-for="(item, index) in com_okOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close" size="small">取消</el-button>
        <el-button type="primary" @click="handelConfirm" size="small"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import news from "@/api/news/index";
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  inheritAttrs: false,
  components: { Treeselect },
  props: {
    categoryList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    row: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {
        name: undefined,
        parent: undefined,
        no_order: 0,
        foldername: undefined,
        status: true,
        com_ok: false
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        parent_id: [],
        no_order: [
          {
            type: "number",
            required: false,
            message: "序号为数字",
            trigger: "blur"
          }
        ],
        foldername: [],
        status: [],
        com_ok: []
      },
      statusOptions: [
        {
          label: "是",
          value: true
        },
        {
          label: "否",
          value: false
        }
      ],
      tpOptions:[
        {
          label: "咨询",
          value: 1
        },
        {
          label: "反映",
          value: 4
        },
        {
          label: "表扬",
          value: 3
        },
        {
          label: "建议",
          value: 2
        },
        {
          label: "投诉",
          value: 5
        }
      ],
      com_okOptions: [
        {
          label: "是",
          value: true
        },
        {
          label: "否",
          value: false
        }
      ],
      path: this.$route.fullPath
    };
  },
  computed: {
    title() {
      return this.row.id ? "修改栏目" : "新增栏目";
    },
    showParent() {
      return !(this.isRepair);
    },
    interface() {
      return news;
    }
  },
  watch: {},
  created() {
    if (this.row.id) {
      for (let o in this.formData) {
        if (o == "parent" && this.row[o] == 0) {
          this.formData[o] = undefined;
        } else {
          this.formData[o] = this.row[o];
        }
      }
    }
  },
  mounted() {},
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        if (this.row.id) {
          this.interface.editCategory(this.row.id, this.formData).then(res => {
              this.msgSuccess("修改成功!");
              this.$emit("reloadList");
            this.close();
          });
        } else {
          this.interface.addCategory(this.formData).then(res => {
              this.msgSuccess("添加成功!");
              this.$emit("reloadList");
            this.close();
          });
        }
      });
    }
  }
};
</script>
<style></style>
